<template>
    <view class="myPet">
        <Navigation backType="back" title="我的宠物" background="#fff" />
        <view v-show="list.length != 0 && !loading">
            <u-scroll-list :indicator="false">
                <view class="pl-32 mt-24 f">
                    <view
                        class="f fd-c w-120 mr-16 ai-c"
                        v-for="(item, index) in list"
                        :key="index"
                        :class="curt == index ? 'active' : ''"
                        @click="changePet(index, item)"
                    >
                        <view class="w-120 h-120 b-8">
                            <image :src="item.avatar" class="w-120 h-120"></image>
                        </view>
                        <view class="heng w-64 h-6 b-4 mt-18"></view>
                    </view>
                    <view class="w-120 h-120 b-8 f ai-c jc-c add mr-24" @click="toAddPet"
                        ><image src="http://cwht.ricecs.cn/app/mine/add.png" class="w-40 h-40"></image
                    ></view>
                </view>
            </u-scroll-list>
            <view class="content f fd-c ai-c pt-48 pb-40">
                <image :src="detail.avatar" class="w-160 h-160 b-160"></image>
                <view class="fs-32 fw-600 text-color4 mt-16">{{ detail.name }}</view>
                <view class="mt-40 ph-32 w-f">
                    <view class="box b-12 ph-28 pv-28 w-f">
                        <view class="fw-32 fw-600 text-color4">基本信息</view>
                        <view class="f mt-28">
                            <view class="info f fd-c ai-c">
                                <view class="fs-28 fw-600 text-color4">{{ detail.firstCategoryName }}</view>
                                <view class="fs-24 text-color3 mt-8">种类</view>
                            </view>
                            <view class="info f fd-c ai-c">
                                <view class="fs-28 fw-600 text-color4">{{ detail.gender == 1 ? 'GG' : 'MM' }}</view>
                                <view class="fs-24 text-color3 mt-8">性别</view>
                            </view>
                            <view class="info f fd-c ai-c">
                                <view class="fs-28 fw-600 text-color4">{{ detail.age }}岁</view>
                                <view class="fs-24 text-color3 mt-8">年龄</view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="mt-32 ph-32 w-f">
                    <view class="box b-12 ph-28 pv-28 w-f">
                        <view class="f ai-c jc-s-b">
                            <view class="fw-32 fw-600 text-color4">身份信息</view>
                            <view class="f">
                                <view class="f ai-c mr-24" @click="editTap">
                                    <image src="http://cwht.ricecs.cn/app/mine/edit.png" class="w-24 h-24"></image>
                                    <view class="fs-26 text-color ml-8">编辑</view>
                                </view>
                                <view class="fs-26 text-color ml-8" @click="delTap">删除</view>
                            </view>
                        </view>
                        <view class="f mt-28">
                            <view class="info f fd-c ai-c">
                                <view class="fs-28 fw-600 text-color4">{{ detail.secondCategoryName }}</view>
                                <view class="fs-24 text-color3 mt-8">宠物品种</view>
                            </view>
                            <view class="info f fd-c ai-c">
                                <view class="fs-28 fw-600 text-color4">{{ detail.birthday }}</view>
                                <view class="fs-24 text-color3 mt-8">出生日期</view>
                            </view>
                            <view class="info f fd-c ai-c">
                                <view class="fs-28 fw-600 text-color4">{{ detail.sterilization == 1 ? '已绝育' : '未绝育' }}</view>
                                <view class="fs-24 text-color3 mt-8">是否绝育</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="f fd-c ai-c jc-c pt-220" v-show="list.length == 0 && !loading">
            <image
                :src="getBaseUrl() + '/admin-api/system/file/19/get/5813ef6f8bdda234ff51d32e210b9a6a22cbbdf2ea3e9046679b847564e363b3.png'"
                class="w-150 h-150"
            ></image>
            <view class="fs-32 text-color4 mt-28">您还未添加宠物，请添加点击</view>
            <view class="mt-64 w-290 h-88 b-88 f ai-c jc-c btn">
                <image src="http://cwht.ricecs.cn/app/mine/add-b.png" class="w-32 h-32"></image>
                <view class="fs-32 fw-500 text-color5 ml-16" @click="toAddPet">添加宠物</view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { onLoad,onShow } from '@dcloudio/uni-app';
import { mypetProfile, mypetProfileDetail, petDelete } from '@/services/api/pet';
import { getBaseUrl } from '@/utils/env';
const loading = ref(true);
const list = ref<any[]>([]);
const curt = ref(0);
const detail = ref<any>('');
onLoad((opt:any) => {
	if(opt.pet_id){
		curt.value = opt.index;
		getDetail(opt.pet_id);
	}
    
});
onShow(() => {
    curt.value = 0;
    getPet();
});
function changePet(index: number, data: any) {
    curt.value = index;
    getDetail(data.id);
}
//删除
function delTap() {
    uni.showModal({
        title: '提示',
        content: '确定删除',
        success: async function (res) {
            if (res.confirm) {
                await petDelete({ id: detail.value.id });
                curt.value = 0;
                getPet();
            }
        },
    });
}
//获取宠物
async function getPet() {
    loading.value = true;
    const { data } = await mypetProfile({});
    list.value = data;
    loading.value = false;
    if (list.value.length > 0) {
        getDetail(list.value[0].id);
    }
}
//获取详情
async function getDetail(id: string) {
	
    const { data } = await mypetProfileDetail(id);
    data.birthday = data.birthday.join('/');
    detail.value = data;
}
function toAddPet() {
    uni.navigateTo({
        url: '/pages_mine/addPet',
    });
}
function editTap() {
    uni.navigateTo({
        url: `/pages_mine/addPet?id=${detail.value.id}`,
    });
}
</script>
<style lang="scss" scoped>
.myPet {
    background: #f5f5f5;
    min-height: 100vh;
    ::v-deep .u-scroll-list {
        padding-bottom: 0 !important;
    }
    .btn {
        background: #fabb3c;
    }
    .info {
        width: 33.33%;
    }
    .box {
        background: #f5f5f5;
    }
    .content {
        background: #fff;
    }
    .add {
        border: 1rpx solid #dddddd;
        background: #fff;
    }
    .active {
        image {
            border: 4rpx solid #fabb3c;
        }

        .heng {
            background: #fabb3c;
        }
    }
}
</style>
